<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="currentRoute.name" v-if="currentRoute.meta.keepAlive"/>
    </keep-alive>
    <transition name="fade" mode="out-in">
      <component :is="Component" :key="currentRoute.name" v-if="!currentRoute.meta.keepAlive"/>
    </transition>
  </router-view>
</template>

<script setup>
import {RouterView, useRoute} from 'vue-router';
import {computed} from 'vue';

const route = useRoute();
const currentRoute = computed(() => route);
</script>

<style scoped lang="scss">
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.fade-enter-to, .fade-leave-from {
  opacity: 1;
}

.fade-enter-active, .fade-leave-active {
  transition: 0.5s ease;
}

</style>
